<template>
  <div>
    <el-row type="flex" justify="space-between" class="button-box">
      <el-col :span="6" class="left">
        <el-input placeholder="输入 英文名/描述 查询" class="search-input" v-model="params.search">
          <el-button slot="append" @click="searchRole">搜索</el-button>
        </el-input>
      </el-col>
      <el-col :span="18" class="right">
        <el-button type="primary" @click="addRole">新增角色</el-button>
      </el-col>
    </el-row>
    <role-table :listLoading="listLoading" :tableColumn="tableColumn" :tableData="tableData" :currentPage="currentPage" :total="total" @actionClick="actionClick" :buttonGroup="buttonGroup" :pageSize="pageSize" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
      <template slot="deletable" slot-scope="scope">
        <span>{{ scope.row.deletable | deletableFilter }}</span>
      </template>
    </role-table>

    <role-template :form="form" :disabled="disabled" :editFlag="editFlag" :title="userFormTitle" :dialogVisible.sync="dialogVisible" @submitForm="submitForm"></role-template>
  </div>
</template>

<script>
  import utilMixin from '@views/mixin/systemUtil'
  import RoleTable from '@components/Table'
  import RoleTemplate from '@views/system/components/CreateRoleTemplate'
  import { getRoleList, addRole, updateRole, deleteRole, getRoleDetail } from '@api/system'
  import { Vue, Component, Watch } from 'vue-property-decorator'

  @Component({
    components: {
      RoleTable,
      RoleTemplate
    },
    mixins: [utilMixin]
  })
  export default class SystemRole extends Vue {
    data() {
      return {
        dialogVisible: false, //form表单是否显示
        form: {}, //form表单提交对象
        userFormTitle: "", //表单title
        disabled: false, //表单元素是否可编辑
        editFlag: false, //是否编辑模式
        submitIndex: 0, //表单确定按钮回调索引 0新增 1浏览 2编辑 3删除
        tableColumn: [ //表格列对象
          { type: "name", name: "名称", operate: false },
          { type: "engName", name: "英文名", operate: false },
          { type: "desc", name: "描述", operate: false },
          { type: "deletable", name: "是否可删除", operate: true }
        ],
        tableData: [], //表格数据
        currentPage: 1, //当前页码
        buttonGroup: [{ name: '浏览' }, { name: '编辑' }, { name: '删除' }] //表格按钮数组
      }
    }
    @Watch('pageSize')
    pageSizeChange(val) { //监听一页数量
      this.params.limit = val;
      this.fetchData();
    }
    @Watch('pageIndex')
    pageIndexChange(val) { //监听页码索引
      this.currentPage = val - 0 + 1;
      this.params.offset = this.startOffsetNum;
      this.fetchData();
    }
    mounted() {
      this.params.offset = this.startOffsetNum;
      this.params.limit = this.pageSize;

      this.$nextTick(function() {
        this.fetchData();
      })
    }
    fetchData() { //初始化表格数据
      this.listLoading = true
      getRoleList(this.params).then(response => {
        let res = response.data;
        if (res.status) {
          this.tableData = res.data.rows;
          this.total = res.data.total;
          this.listLoading = false;
        } else {
          this.showMessage(res.message, 'error');
        }
      })
    }
    actionClick(rowData, index) { //表单按钮组回调方法
      //1浏览 2编辑 3删除
      switch (index) {
        case 1:
          this.browserClick(rowData);
          break;
        case 2:
          this.editClick(rowData);
          break;
        case 3:
          this.deleteClick(rowData);
          break;
      }
    }
    addRole() { //新增角色
      this.commonEdit({}, 0);
    }
    browserClick(rowData) { //浏览
      getRoleDetail(rowData.id).then(response => {
        let res = response.data;
        if (res.status) {
          this.commonEdit(res.data, 1);
        } else {
          this.showMessage(res.message, 'error');
        }
      })
    }
    editClick(rowData) { //编辑
      getRoleDetail(rowData.id).then(response => {
        let res = response.data;
        if (res.status) {
          this.commonEdit(res.data, 2);
        } else {
          this.showMessage(res.message, 'error');
        }
      })
    }
    commonEdit(rowData, index) { //弹出表单共用方法
      this.submitIndex = index;
      this.userFormTitle = index === 0 ? "新增角色" : (index === 1 ? "浏览角色" : "编辑角色");
      this.disabled = index === 1 ? true : false;
      this.editFlag = index === 0 ? false : true;
      this.form = Object.assign({}, rowData);
      this.dialogVisible = true;
    }
    submitForm(roleForm) { //表单提交方法
      if (this.submitIndex === 1) {
        this.dialogVisible = false;
        return false;
      }
      this.listLoading = true
      if (this.submitIndex === 0) {
        addRole(roleForm).then(response => {
          this.commonSubmitRes(response.data, this.submitIndex);
        }, error => {
          this.listLoading = false;
        })
      } else {
        updateRole(roleForm).then(response => {
          this.commonSubmitRes(response.data, this.submitIndex);
        }, error => {
          this.listLoading = false;
        })
      }
    }
    deleteClick(rowData) { //删除方法
      if (rowData.deletable) {
        this.$msgbox.confirm('确定要删除角色：' + rowData.name + ' 吗？', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteRole(rowData.id).then(response => {
            this.commonSubmitRes(response.data, 3);
          }, error => {
            this.listLoading = false;
          })
        })
      } else {
        this.showMessage('此项不可删除', 'warning');
      }
    }
    commonSubmitRes(response, index) { //提示回调方法
      if (response.status) {
        let message = index === 0 ? '新增角色成功' : (index === 3 ? '删除角色成功' : '修改角色成功');
        this.showMessage(message, 'success');
        this.dialogVisible = false;
        this.pageIndex = 0;
        this.fetchData();
      } else {
        this.showMessage(response.message, 'error');
      }
      this.listLoading = false;
    }
    searchRole() { //搜索方法
      this.pageIndex = 0;
      this.fetchData();
    }
  }
</script>
